<!--<template>-->
<!--  <div>-->
<!--    <br>-->

<!--&lt;!&ndash;    搜索div  包括 搜索文本框和搜索按钮&ndash;&gt;-->
<!--    <div class="mt-4" style="margin-top: 20px;margin-bottom: 20px;">-->

<!--      <el-date-picker v-model="nowTime"-->
<!--                      format="YYYY/MM/DD"-->
<!--                      value-format="YYYY-MM-DD"-->
<!--                      type="date"-->
<!--                      placeholder="请输入日期"-->
<!--                      style="width: 13%;margin-left: 61.5%"/>-->
<!--      <el-button type="primary" style="margin-left: 10px;" @click="getMenuList">查询</el-button>-->
<!--    </div>-->

<!--&lt;!&ndash;    表格部分&ndash;&gt;-->
<!--    <el-table :data="OutboundList"  border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">-->
<!--      <el-table-column type="selection" width="55" />-->
<!--      <el-table-column label="销售订单ID" prop="salesOrderId" />-->
<!--      <el-table-column label="出库时间" prop="nowTime" />-->
<!--      <el-table-column label="出库数量" prop="totalNum" />-->
<!--      <el-table-column label="出库状态" prop="state" />-->
<!--      <template #default="scope">-->
<!--        <el-tag v-if="scope.row.state==1">已出库</el-tag>-->
<!--        <el-tag type="danger" v-else>未出库</el-tag>-->
<!--      </template>-->

<!--&lt;!&ndash;      操作列&ndash;&gt;-->
<!--      <el-table-column label="操作">-->
<!--        <template #default="scope">-->
<!--          <el-button size="small"  @click="detail(scope.row)">详情</el-button>-->
<!--          <el-button size="small" type="danger" @click="audit(scope.row)">审核</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    &lt;!&ndash;      分页&ndash;&gt;-->
<!--    <div class="block">-->
<!--      <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="limit.page"-->
<!--          :page-sizes="[1,2,3,5,10]"-->
<!--          :page-size="limit.limit"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="count">-->
<!--      </el-pagination>-->
<!--    </div>-->

<!--    <el-dialog title="出库详情" v-model="detailWindow" width="80%" top="13%"  center>-->
<!--      <el-form-->
<!--          ref="addFormRef"-->
<!--          status-icon-->
<!--          label-width="100px"-->
<!--          class="demo-ruleForm"-->
<!--          style="padding-right: 25px;">-->
<!--        <el-table :data="detailedData" border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">-->
<!--          <el-table-column label="商品Id" prop="productId" />-->
<!--          <el-table-column label="商品名称" prop="productName" />-->
<!--          <el-table-column label="单价" prop="price" />-->
<!--          <el-table-column label="数量" prop="quantity" />-->
<!--        </el-table>-->
<!--        &lt;!&ndash;分页&ndash;&gt;-->
<!--        <div class="block">-->
<!--          <el-pagination-->
<!--              @size-change="handleSizeChange"-->
<!--              @current-change="handleCurrentChange"-->
<!--              :current-page="limit.page"-->
<!--              :page-sizes="[1,2,3,5,10]"-->
<!--              :page-size="limit.limit"-->
<!--              layout="total, sizes, prev, pager, next, jumper"-->
<!--              :total="count">-->
<!--          </el-pagination>-->
<!--        </div>-->
<!--      </el-form>-->
<!--    </el-dialog>-->



<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import request from "@/netWork/request"-->
<!--export default {-->
<!--  name: "Outbound",-->
<!--  data() {-->
<!--    return {-->
<!--      // 表格数据-->
<!--      OutboundList: [],-->
<!--      //日期-->
<!--      nowTime: "",-->
<!--      //销售id-->
<!--      salesOrderId:"",-->
<!--      // 详情数据-->
<!--      detailedData:[],-->
<!--      //详情弹框-->
<!--      detailWindow:false,-->
<!--      // 审核数据-->
<!--      outbound:[],-->
<!--      //大小-->
<!--      small: false,-->
<!--      //分页背景颜色-->
<!--      background: true,-->
<!--      count: 0,-->
<!--      //第几页 默认第一页-->
<!--      page: 1,-->
<!--      //一页显示多少 默认5-->
<!--      limit: 5-->
<!--    }-->
<!--  },-->
<!--  // 界面初始化就要调用-->
<!--  created() {-->
<!--    this.getOutbound()-->
<!--  },-->

<!--  methods:{-->
<!--    getOutbound(){-->
<!--      console.log("进来了查询出库信息的方法")-->
<!--      this.$request({-->
<!--        url:'selectOutbound',-->
<!--        method: "get",-->
<!--        contentType:"application/json",-->
<!--        params:{-->
<!--          nowTime:this.nowTime,-->
<!--          page:this.page,-->
<!--          limit:this.limit-->
<!--        }-->
<!--      },res=>{-->
<!--        this.page=this.page;-->
<!--        this.count=res.data.count;-->
<!--        this.OutboundList=res.data.data;-->
<!--          },err=>{-->
<!--        console.log(err);-->
<!--          },8500)-->
<!--    },-->

<!--    handleSizeChange(val) {-->
<!--      this.limit = val;  // 修改显示数-->
<!--      this.getOutbound()-->
<!--    },-->
<!--    handleCurrentChange(val) {-->
<!--      this.page = val;  // 更新当前的页-->
<!--      this.getOutbound();-->
<!--    },-->

<!--    //出库详情-->
<!--    detail(row) {-->
<!--      this.detailWindow = true;-->
<!--      calms({-->
<!--        url: 'selectDetails',-->
<!--        method: "get",-->
<!--        contentType: "application/json",-->
<!--        params: {-->
<!--          salesOrderId: row.salesOrderId,-->
<!--          page: this.page,-->
<!--          limit: this.limit-->
<!--        }-->
<!--      }, res => {-->
<!--        this.page=this.page;-->
<!--        this.count = res.data.count;-->
<!--        this.detailedData = res.data.data;-->
<!--      }, err => {-->
<!--        // eslint-disable-next-line no-console-->
<!--        console.log(err);-->
<!--      },8500)-->
<!--    },-->

<!--    //根据采购Id进行审核-->
<!--    audit(row) {-->
<!--      //提示语-->
<!--      this.$confirm('确定审核该订单？', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancleButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        calms({-->
<!--          url: 'auditOutbound',-->
<!--          method: "post",-->
<!--          contentType: "application/json",-->
<!--          params:-->
<!--              this.outbound=row-->
<!--        }, res => {-->
<!--          console.log("审核信息：" + res.data);-->
<!--          if (res.data >=1) {-->
<!--            this.$message.success('审核成功')-->
<!--            this.getMenuList();-->
<!--          }else if (res.data == -1 ){-->
<!--            this.$message.success('该笔订单已审核')-->
<!--          }else {-->
<!--            this.$message.error('审核失败')-->
<!--          }-->
<!--        }, err => {-->
<!--          console.log(err);-->
<!--        },8500)-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->

<!--</script>-->

<!--<style scoped>-->

<!--</style>-->



<template id="OutboundTemplate">
  <div style="width: 100%;margin-top: 0px;">

    <div class="mt-4" style="margin-top: 20px;margin-bottom: 20px;">

      <div class="block" style="position: relative;left: 30%">
        <el-date-picker v-model="nowTime" type="date" placeholder="选择日期"></el-date-picker>
        <el-button type="primary" id="sele" style="margin-left: 10px" @click="getMenuList()">搜索</el-button>
      </div>

    </div>

    <el-table :data="menuList"  border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
      <el-table-column type="selection" width="55" />
      <el-table-column label="销售订单Id" prop="salesOrderId" />
      <el-table-column label="出库时间" prop="nowTime" />
      <el-table-column label="出库数量" prop="totalNum" />
      <el-table-column label="出库状态" prop="state">
        <template #default="scope">
          <el-tag v-if="scope.row.state==1">已出库</el-tag>
          <el-tag type="danger" v-else>未出库</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small"  @click="detail(scope.row)">详情</el-button>
          <el-button
              size="small"
              type="danger"
              @click="audit(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="limit.page"
          :page-sizes="[1,2,3,5,10]"
          :page-size="limit.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>

    <el-dialog title="出库详情" :visible.sync="detailWindow" width="80%" top="11%"  center>
      <el-form
          ref="addFormRef"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
          style="padding-right: 25px;">

        <el-table :data="detailedData" border style="width: 100%;text-align: center;font-weight: bold;margin-top: 10px;border-left: none">
          <el-table-column label="商品Id" prop="productId" />
          <el-table-column label="商品名称" prop="productName" />
          <el-table-column label="单价" prop="price" />
          <el-table-column label="数量" prop="quantity" />
        </el-table>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import moment from 'moment';

export default {
  name: "selectRepertory",
  data() {
    return {
      // 表格数据
      menuList: [],
      //日期
      nowTime: "",
      //销售id
      salesOrderId:"",
      // 详情数据
      detailedData:[],
      //详情弹框
      detailWindow:false,
      // 审核数据
      outbound:[],
      //大小
      small: false,
      //分页背景颜色
      background: true,
      count: 0,
      //第几页 默认第一页
      page: 1,
      //一页显示多少 默认5
      limit: 5
    }
  },
  // 界面初始化就要调用
  created() {
    this.getMenuList()
  },
  methods: {
    getMenuList(){
      let date=''
      if(this.nowTime instanceof Date){
        const  format='YYYY-MM-DD';
        date=moment(this.nowTime).format(format)
      }
      this.$request({
        url:'/selectOutbound',
        method:'get',
        contentType: "application/json",
        params: {
                nowTime: date,
                page: this.page,
                limit: this.limit
              }
      },res=>{
        this.page=this.page;
        this.total=res.data.count;
        this.menuList=res.data.t;
          },err=>{
        console.log(err);
          },8500)
    },

    handleSizeChange(val) {
      this.limit = val;  // 修改显示数
      this.getRepertory()
    },
    handleCurrentChange(val) {
      this.page = val;  // 更新当前的页
      this.getRepertory()
    },

    //详情
    detail(row){
      this.detailWindow=true;
      this.detailedData=[]
      this.$request({
        url:'/selectDetails',
        method:'get',
        contentType: "application/json",
        params: {
                salesOrderId: row.salesOrderId,
                page: this.page,
                limit: this.limit
              }
          },res=>{
            this.page=this.page;
            this.total = res.data.count;
            this.detailedData.push(res.data.t)
          },err=>{
        console.log(err);
          },8500)
    },

    //根据采购Id进行审核
    audit(row) {
      //提示语
      this.$confirm('确定审核该订单？', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$request({
          url: '/auditOutbound',
          method: "post",
          contentType: "application/json",
          params: {salesOrderId:row.salesOrderId}
        }, res => {
          console.log("审核信息：" + res.data);
          if (res.data.count >=1) {
            this.$message.success('审核成功')
            this.getMenuList();
          }else if (res.data ==1 ){
            this.$message.success('该笔订单已审核')
          }else {
            this.$message.error('审核失败')
          }
        }, err => {
          console.log(err);
        },8500)
      })
    }
  }
}
</script>

<style scoped>
th{
  width: 20%;
  border: 1px;
}
td{
  width: 20%;
  border: 1px;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
  border: 1px;

}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  text-align: center;
}
</style>